原文: AI 一键生成爆款图文,排版好看,配图还能自定义发挥!一分钟学会(含提示词)
2024-12-06 23:52:00

摘要: [image: https://mmbiz.qpic.cn/sz_mmbiz_gif/8m4L0A5Jh04Ivic4BVZsgh12nJpuzvMNv8rJb1ia62yTeEnQ234KJZ4QCfunkUnzza7r0NAsZC2Wu


原来做图文,也能这么简单的!

往期分享过非常多 AI 做图文的方法,什么老奶奶文案,RPA 自动制作图文,可灵 AI 文案号等等。

但是你一定没想到,原来爆款图文可以这么简单做出来。

左图是我给AI的原图,我希望仿照原图做出一张的爆款原图,除了没有小图案,

排版,构图,文案

都非常完美。

再看一个案例,左边是我给AI的治愈文案图,右边的是AI生成全新的文案图。

如果你还没意识到,这项技术代表着什么?这意味着类似这种情感图文、知识类图文,AI能一键模仿出爆款。

制作方法很简单,跟着我一步一步操作。

所用到的 AI 工具叫 Claude 3.5,如果用不上,也可以通过 AI 聚合平台 POE 上使用。

只需要准备一张参考的爆款图片和提示词,即可直接出图。

爆款图文 AI 提示词:

你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计:

1. 文字提取要求:

- 准确提取图片中所有文字内容

- 保留原有的文字层级关系

- 保持原始格式和特殊字符

- 注意保留文字的重要程度区分

2. 网页实现要求:

技术规范:

- 仅使用HTML和CSS实现(不使用JavaScript)

- 严格保持3:4的容器比例

- 实现响应式设计

- 确保跨浏览器兼容性

- 使用flex布局进行页面排版

视觉风格:

- 创建优雅、精致的版式设计

- 采用简洁现代的设计美学

- 运用柔和的渐变和纹理效果

- 适当使用装饰性边框

- 保持整体视觉平衡

CSS具体要求:

- 使用linear-gradient制作柔和背景

- 容器必须保持aspect-ratio: 3/4

- 使用flex布局实现内容居中对齐

- 设置合适的letter-spacing提高可读性

- 使用恰当的line-height优化行间距

- 添加精致的边框装饰

- 包含响应式媒体查询

字体排版规范:

- 使用优雅的衬线字体

- 建立清晰的文字层级关系

- 确保最佳阅读体验

- 实现合理的字体大小变化

- 可选添加细微的文字动效

布局结构:

- 居中构图

- 合理的留白

- 清晰的视觉层次

- 响应式内外边距

- 适度的装饰元素

输出要求:

- 提供完整的HTML文件

- 所有CSS样式写在<style>标签中

- 使用清晰的类名命名

- 包含响应式断点设置

- 关键样式部分需添加注释

请确保设计在电脑和手机上都能完美展示,文字始终保持清晰可读,同时保持优雅的美感。

操作的时候,只需要上传一张图片 + 提示词,即可。最好选择claude 3.5。

出来的效果是这样的。

如果希望换一张背景图片也非常简单,去可灵 AI 上生成一张图片,然后把图片链接复制出来。

继续下面的对话。

提示词:

请帮我为之前生成的HTML页面添加背景图片功能,图片URL:

XXX

要求:

添加半透明遮罩层保护文字可读性

可调整亮度和对比度适配文字

确保文字与背景的对比度

最后的成果可以看一下,当然也可以继续向 AI 提要求,生成出更好看的。

上面的提示词还有非常多的优化空间,学长也会持续迭代,如果希望持续获得 AI 技巧信息差,可以关注学长公众号,后台加群。

如果你问,为什么你懂这么多 AI 的信息差,我赠送您一张免费的 AI 课程,内容超值,毕竟我也是在里面学到的。

如果本文章能给你一点启发,感谢

点个赞、在看、转发三连

,如果想第一时间收到推送,请点上星标⭐

关注公众号,回复“

知识库

”,获取伟豪的精选知识库知识。

扫描下方二维码,获取 AI 提示词资料和副业资料,加群交流。

需求 # 目的 作用 实质 形式
输入 类型 来源
实现 外部工具 动作 指令
输出 类型 去处
高亮推断 点击列名 ↔ 显示/隐藏 · 点击组名 ↔ 整组切换 · 「推」角标 hover 看推断理由
工序 AI 模仿爆款图文设计 #目的: 利用 Claude 3.5 模仿爆款图文的排版、构图和文案,实现一键生成。 case: gzh_c48e3f239dc08f2a9b36cb0623d2e143
返回
内容类型/成品/成品图
需求 输入 实现 输出
# 目的 作用 实质 形式 类型 来源 外部工具 动作 指令 类型 去处
s1
Claude 3.5 生成 提示词,得到 成品图
主体生成图文现代简洁内容类型/素材/化学变化/参考图<一张参考的爆款图文图片>Claude 3.5生成/元素生成你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计: 1. 文字提取要求:    - 准确提取图片中所有文字内容    - 保留原有的文字层级关系    - 保持原始格式和特殊字符    - 注意保留文字的重要程度区分 2. 网页实现要求: 技术规范: - 仅使用HTML和CSS实现(不使用JavaScript) - 严格保持3:4的容器比例 - 实现响应式设计 - 确保跨浏览器兼容性 - 使用flex布局进行页面排版 视觉风格: - 创建优雅、精致的版式设计 - 采用简洁现代的设计美学 - 运用柔和的渐变和纹理效果 - 适当使用装饰性边框 - 保持整体视觉平衡 CSS具体要求: - 使用linear-gradient制作柔和背景 - 容器必须保持aspect-ratio: 3/4 - 使用flex布局实现内容居中对齐 - 设置合适的letter-spacing提高可读性 - 使用恰当的line-height优化行间距 - 添加精致的边框装饰 - 包含响应式媒体查询 字体排版规范: - 使用优雅的衬线字体 - 建立清晰的文字层级关系 - 确保最佳阅读体验 - 实现合理的字体大小变化 - 可选添加细微的文字动效 布局结构: - 居中构图 - 合理的留白 - 清晰的视觉层次 - 响应式内外边距 - 适度的装饰元素 输出要求: - 提供完整的HTML文件 - 所有CSS样式写在<style>标签中 - 使用清晰的类名命名 - 包含响应式断点设置 - 关键样式部分需添加注释 请确保设计在电脑和手机上都能完美展示内容类型/成品/成品图s1o1 <AI 模仿生成的爆款图文>
程序控制类型/指令/提示词爆款图文 AI 提示词: 你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计: 1. 文字提取要求:    - 准确提取图片中所有文字内容    - 保留原有的文字层级关系    - 保持原始格式和特殊字符    - 注意保留文字的重要程度区分 2. 网页实现要求: 技术规范: - 仅使用HTML和CSS实现(不使用JavaScript) - 严格保持3:4的容器比例 - 实现响应式设计 - 确保跨浏览器兼容性 - 使用flex布局进行页面排版 视觉风格: - 创建优雅、精致的版式设计 - 采用简洁现代的设计美学 - 运用柔和的渐变和纹理效果 - 适当使用装饰性边框 - 保持整体视觉平衡 CSS具体要求: - 使用linear-gradient制作柔和背景 - 容器必须保持aspect-ratio: 3/4 - 使用flex布局实现内容居中对齐 - 设置合适的letter-spacing提高可读性 - 使用恰当的line-height优化行间距 - 添加精致的边框装饰 - 包含响应式媒体查询 字体排版规范: - 使用优雅的衬线字体 - 建立清晰的文字层级关系 - 确保最佳阅读体验 - 实现合理的字体大小变化 - 可选添加细微的文字动效 布局结构: - 居中构图 - 合理的留白 - 清晰的视觉层次 - 响应式内外边距 - 适度的装饰元素 输出要求: - 提供完整的HTML文件 - 所有CSS样式写在<style>标签中 - 使用清晰的类名命名 - 包含响应式断点设置 - 关键样式部分需添加注释 请确保设计在电脑和手机上都能完美展示,文字始终保持清晰可读,同时保持优雅的美感。 操作的时候
工序 AI 替换图文背景设计 #目的: 在已有 HTML 页面基础上,通过 AI 替换背景图片并优化文字可读性。 case: gzh_c48e3f239dc08f2a9b36cb0623d2e143
返回
内容类型/成品/成品图
需求 输入 实现 输出
# 目的 作用 实质 形式 类型 来源 外部工具 动作 指令 类型 去处
s1
Claude 3.5 调整 提示词,得到 成品图
后期图文现代简洁内容类型/素材/化学变化/参考图<一张背景图片>Claude 3.5修改/变/调整添加半透明遮罩层保护文字可读性 可调整亮度和对比度适配文字 确保文字与背景的对比度内容类型/成品/成品图s2o1 <AI 替换背景后的图文>
程序控制类型/指令/提示词提示词: 你是一位专业的网页设计师,专注于文字排版和页面布局。请按以下要求完成设计: 1. 文字提取要求:    - 准确提取图片中所有文字内容    - 保留原有的文字层级关系    - 保持原始格式和特殊字符    - 注意保留文字的重要程度区分 2. 网页实现要求: 技术规范: - 仅使用HTML和CSS实现(不使用JavaScript) - 严格保持3:4的容器比例 - 实现响应式设计 - 确保跨浏览器兼容性 - 使用flex布局进行页面排版 视觉风格: - 创建优雅、精致的版式设计 - 采用简洁现代的设计美学 - 运用柔和的渐变和纹理效果 - 适当使用装饰性边框 - 保持整体视觉平衡 CSS具体要求: - 使用linear-gradient制作柔和背景 - 容器必须保持aspect-ratio: 3/4 - 使用flex布局实现内容居中对齐 - 设置合适的letter-spacing提高可读性 - 使用恰当的line-height优化行间距 - 添加精致的边框装饰 - 包含响应式媒体查询 字体排版规范: - 使用优雅的衬线字体 - 建立清晰的文字层级关系 - 确保最佳阅读体验 - 实现合理的字体大小变化 - 可选添加细微的文字动效 布局结构: - 居中构图 - 合理的留白 - 清晰的视觉层次 - 响应式内外边距 - 适度的装饰元素 输出要求: - 提供完整的HTML文件 - 所有CSS样式写在<style>标签中 - 使用清晰的类名命名 - 包含响应式断点设置 - 关键样式部分需添加注释 请确保设计在电脑和手机上都能完美展示,文字始终保持清晰可读,同时保持优雅的美感。 操作的时候,只需要上传一张图片 + 提示词,即可。最好选择claude 3.5。 [image: https://mmbiz.qpic.cn/sz_mmbiz_png/8m4L0A5Jh04ZdwIUKGZHCFcNfKaPib7yr9F7hUxr8X7uMgIQEIrylSFWia5LBNcnK11ep18tiaSCuibZCKocx8S4zQ/640?wx_fmt=png&from=appmsg] 出来的效果是这样的。 [image: https://mmbiz.qpic.cn/sz_mmbiz_png/8m4L0A5Jh04ZdwIUKGZHCFcNfKaPib7yrS5jgxuMlvOBZQcoAL8EjL69yjpOPTqdeMtSqqCbZs5ahjI8lG5DvlA/640?wx_fmt=png&from=appmsg] 如果希望换一张背景图片也非常简单,去可灵 AI 上生成一张图片,然后把图片链接复制出来。 [image: https://mmbiz.qpic.cn/sz_mmbiz_png/8m4L0A5Jh04ZdwIUKGZHCFcNfKaPib7yrgGiaEE39WRfbMK87EalUZkI5Mtfs4yhXCkuRXLNicTY5drnBqr4P8giaQ/640?wx_fmt=png&from=appmsg] 继续下面的对话。 提示词: 请帮我为之前生成的HTML页面添加背景图片功能,图片URL: XXX 要求: 添加半透明遮罩层